<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            width: 100%;
            /*height: 100%;*/
        }

        body {
        }

        .father1 {
            width: 900px;
            height: 300px;
            border: #213547 1px solid;
            position: relative;
        }

        .son1 {
            width: 600px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color: rebeccapurple;
            height: 100px;
            margin: auto;
        }

        .father2 {
            width: 900px;
            height: 300px;
            border: #213547 1px solid;
            position: relative;
        }

        .son2 {
            width: 600px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color: #29a4f6;
            height: 100px;
            margin: auto;
        }

        .father3 {
            top: 0;
            /*position: sticky !important;*/
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .father-common {
            width: 900px;
            height: 300px;
            border: #213547 1px solid;
            position: relative;
        }

        .son-common {
            width: 600px;
            background-color: #29a4f6;
            height: 100px;
        }

        .son3 {
            background-color: red;

        }

        .father4 {
            display: grid;
            justify-items: center;
            align-items: center;
            /*grid-template-columns: 1fr;*/
        }

        .father5 {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .son5 {
            margin: auto;
        }
    </style>
</head>
<body>
<h1>center.html</h1>
<h2>1.定位+margin</h2>
<div class="father1 father-common">
    <div class="son1">
    </div>
</div>
<h2>2.定位+transform</h2>
<div class="father2 father-common">
    <div class="son2">
    </div>
</div>
<h2>3.flex</h2>
<div class="father3 father-common">
    <div class="son3 son-common">
    </div>
</div>
<h2>4.grid</h2>
<div class="father4 father-common">
    <div class="son-common">
    </div>
</div>
<h2>5.table</h2>
<div class="father5 father-common">
    <div class="son-common son5">
        son5
    </div>
</div>
</body>
</html>